<!--
 * @Description:  基础题库
 * @Author: yue
 * @Date: 2022-09-17 11:42:41
 * @LastEditors: yue
 * @LastEditTime: 2022-09-21 14:32:59
-->

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- NOTE：筛选部分 -->
        <questions-filter @search="search"></questions-filter>

        <!-- NOTE：提示文本 -->
        <el-alert
          :title="`数据一共${questionList.counts}条`"
          :closable="false"
          class="message"
          type="info"
          show-icon
        ></el-alert>

        <!-- NOTE：表格部分 -->
        <!-- NOTE：表格 -->
        <!--  -->
        <el-table :data="questionList.items" :header-cell-style="headerStyle">
          <el-table-column
            prop="number"
            label="试题编号"
            width="112px"
          ></el-table-column>

          <el-table-column
            prop="subject"
            label="学科"
            width="130px"
          ></el-table-column>

          <el-table-column
            prop="catalog"
            label="目录"
            width="130px"
          ></el-table-column>

          <el-table-column v-slot="{ row }" label="题型" width="100px">
            {{ questionType(row.questionType) }}
          </el-table-column>

          <el-table-column v-slot="{ row }" label="题干" min-width="220px">
            <span v-html="row.question"></span>
          </el-table-column>

          <el-table-column v-slot="{ row }" label="录入时间" width="180px">
            {{ parseTime(row.addDate) }}
          </el-table-column>

          <el-table-column
            :formatter="formatDifficulty"
            prop="difficulty"
            label="难度"
            width="120px"
          ></el-table-column>

          <el-table-column prop="creator" label="录入人"></el-table-column>

          <el-table-column v-slot="{ row }" label="操作" width="200px">
            <el-row type="flex" justify="center">
              <!-- 预览按钮 -->
              <el-button
                class="view-btn"
                icon="el-icon-view"
                circle
                @click="preview(row)"
              ></el-button>
              <!-- 编辑按钮 -->
              <el-button
                class="edit-btn"
                icon="el-icon-edit"
                circle
                @click="$router.push(`/questions/new?id=${row.id}`)"
              ></el-button>
              <!-- 删除按钮 -->
              <el-button
                class="del-btn"
                icon="el-icon-delete"
                circle
                @click="del(row)"
              ></el-button>
              <!-- 加入精选按钮 -->
              <el-button
                class="check-btn"
                :class="{ class: row.choiceState }"
                icon="el-icon-check"
                circle
                @click="check(row)"
              ></el-button>
            </el-row>
          </el-table-column>
        </el-table>

        <!-- NOTE：分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            :current-page="info.page"
            :total="questionList.counts"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="20"
            layout="prev, sizes, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-row>

        <!-- NOTE：预览 -->
        <questions-preview
          :show-dialog.sync="showDialog"
          :question-detail="questionDetail"
        ></questions-preview>
      </el-card>
    </div>
  </div>
</template>

<script>
// 组件：搜索，预览
import QuestionsFilter from '@/module-hmmm/components/questions-filter.vue'
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'
// 请求：基础题库
import {
  list as getQuestions,
  detail,
  remove,
  choiceAdd
} from '@/api/hmmm/questions.js'
// 释义文件
import { difficulty } from '@/api/hmmm/constants.js'
// 时间格式化
import { parseTime } from '@/utils'

export default {
  components: {
    QuestionsFilter,
    QuestionsPreview
  },
  data() {
    return {
      class: 'is-true',
      questionList: {}, // 题目列表
      showDialog: false, // 弹层显示状态
      // 请求信息
      info: {
        page: 1,
        pagesize: 10
      },
      searchList: {}, // 搜索信息
      questionDetail: {} // 题目详情
    }
  },
  mounted() {
    this.getQuestions()
  },
  methods: {
    // 预览
    async preview(row) {
      const data = await detail(row)
      this.questionDetail = data.data
      this.showDialog = true
    },
    // 删除
    async del(row) {
      try {
        await this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.$message.success('删除成功')
        this.search()
      } catch (err) {
        console.log(err)
      }
    },
    // 加入精选
    async check(row) {
      let data = {}

      data = { ...row, choiceState: 1 }

      await choiceAdd(data)
      this.search()
      row.choiceState = 1
      this.$message.success('操作成功')
    },
    // 搜索
    search(obj) {
      this.searchList = { ...obj }
      const data = { ...this.info, ...this.searchList }
      this.getQuestions(data)
    },
    // 获取题目列表
    async getQuestions(obj) {
      let info = { ...this.info }
      if (obj) {
        info = { ...this.info, ...obj }
      }
      const data = await getQuestions(info)
      this.questionList = data.data
    },

    // 状态释义
    questionType(type) {
      return type === '1' ? '单选' : type === '2' ? '多选' : '简答'
    },
    // 表头样式
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return `background-color: rgb(244, 244, 245);
    color: rgb(144, 147, 153);border-bottom:2px solid rgb(232, 232, 232)`
      }
    },
    // 时间格式化
    parseTime,
    // 难度
    formatDifficulty(row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value + '' === cellValue)
      return obj ? obj.label : '未知'
    },

    // 分页函数
    handleSizeChange(pagesize) {
      this.info.pagesize = pagesize
      this.search()
    },
    handleCurrentChange(page) {
      this.info.page = page
      this.search()
    }
  }
}
</script>

<style scoped lang="scss">
.view-btn {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
}
.edit-btn {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  &:hover {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }
}
.del-btn {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  &:hover {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
  }
}
.check-btn {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
  &:hover {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;
  }
}
.is-true {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}
</style>
